﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <title>普陀区市民终生学习人文行走</title>
    <link rel="stylesheet" href="../asset/css/animate.min.css">
    <link rel="stylesheet" href="../asset/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../asset/css/audio_player.css">
    <link rel="stylesheet" href="../asset/css/walking3.css">
    <link rel="stylesheet" type="text/css" href="../asset/css/animate.min.css" />
    <style type="text/css">
        * {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>
</head>
<body>
    <section class="wrapper">
        <div id="main_index" class="main">
            <div id="footer"></div>
            <div id="catalog">
                <span id="catalog_study" data_key="study" class="catalog_item"></span>
                <span id="catalog_look" data_key="look" class="catalog_item"></span>
                <span id="catalog_listen" data_key="listen" class="catalog_item"></span>
                <span id="catalog_try" data_key="try" class="catalog_item"></span>
                <span id="catalog_find" data_key="find" class="catalog_item"></span>
                <span id="catalog_scan" data_key="scan" class="catalog_item"></span>
                <span id="catalog_think" data_key="think" class="catalog_item"></span>
            </div>
        </div>
        <div id="main_study" class="main hidden">
            <div id="study_title" class="page_title middle">
            </div>
            <div id="study_content" class="page_content">

                <!--<div id="card_1" class="card">
                <div class="carousel">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide cover-02"></div>
                            <div class="swiper-slide cover-03"></div>
                            <div class="swiper-slide cover-04"></div>
                            <div class="swiper-slide cover-05"></div>
                            <div class="swiper-slide cover-06"></div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="study_intro">
                    <p>
                        上海纺织博物馆，位于苏州河南岸、澳门路北侧、昌化路冬眠、长寿路桥西北翼原为上海申新纺织第九厂的旧址。户外展示面积1500平方米，室内展区面积4480平方米，场馆分为五个厅，分别为序厅、历程馆、撷英馆、科普馆、专题馆。气势恢弘的序厅、底蕴厚实的历程馆、时空连贯的撷英馆、互动叠现的科普馆、赏心悦目的专题馆，演绎了上海纺织六千多年的产业历史和文化。
                    </p>
                </div>
            </div>
            <div id="card_2" class="card hidden">
                <div class="carousel">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide cover-07"></div>
                            <div class="swiper-slide cover-08"></div>
                            <div class="swiper-slide cover-09"></div>
                            <div class="swiper-slide cover-10"></div>
                            <div class="swiper-slide cover-11"></div>
                            <div class="swiper-slide cover-12"></div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="study_intro">
                    <p>
                        博物馆通过实物、资料、场景、图文、模型、多媒体等，展示上海地区纺织业发展的历史文脉，集中展示了上海纺织的工人阶级在中国共产党领导下，积极参与反帝、反封建、发压迫斗争的悲壮历史，展示了上海纺织工人在社会主义建设时期的光辉业绩。
                    </p>
                </div>
            </div>
            <div id="card_3" class="card hidden">
                <div class="carousel">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide cover-13"></div>
                            <div class="swiper-slide cover-14"></div>
                            <div class="swiper-slide cover-15"></div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="study_intro">
                    <p>
                        博物馆现已成为全国纺织精神文明建设示范基地、全国科普教育基地、上海市爱国主义教育基地、上海市科普教育基地、上海市工业旅游基地、申九“二二斗争”革命纪念地。
                    </p>
                </div>
            </div>
            <div id="card_4" class="card hidden">
                <div class="carousel">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide cover-16"></div>
                            <div class="swiper-slide cover-17"></div>
                            <div class="swiper-slide cover-18"></div>
                            <div class="swiper-slide cover-19"></div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="study_intro">
                    <p style="text-indent: 0; line-height: 1.5;">序厅</p>
                    <p>以其气势恢宏、纺织元素叠现的环境布置，将上海纺织的历史浓缩在只有480平方米的大厅内。既凸显纺织的历史积淀，更张扬上海纺织的美好未来。</p>
                    <p style="text-indent: 0; line-height: 1.5;">历程馆</p>
                    <p>以古代、近代、现代和当代的史实，演绎上海纺织的发展历史：彰显纺织对于形成上海这座国际化大都市的历史地位和“母亲工业”、“支柱产业”的作用：展望“科技与时尚”的产业发展前景。</p>
                </div>
            </div>
            <div id="card_5" class="card hidden">
                <div class="carousel">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide cover-20"></div>
                            <div class="swiper-slide cover-21"></div>
                            <div class="swiper-slide cover-22"></div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="study_intro">
                    <p style="text-indent: 0; line-height: 1.5;">撷英馆</p>
                    <p>撷取了上海各个时代的纺织先贤、劳模、纺织实业家、专家等纺织精英；展示了纺织英烈在建立新中国时期可歌可泣的英勇事迹；回眸了上海地区难忘的纺织老字号和历史遗存。</p>

                </div>
            </div>
            <div id="card_6" class="card hidden">
                <div class="carousel">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide cover-23"></div>
                            <div class="swiper-slide cover-24"></div>
                            <div class="swiper-slide cover-25"></div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="study_intro">
                    <p style="text-indent: 0; line-height: 1.5;">科普馆</p>
                    <p>通过诠释“神奇的纤维足迹，缤纷的面料世界、完整的工艺链条、广泛的应用空间”等纺织知识，集中体现知识性、趣味性、参与度和互动性。</p>

                </div>
            </div>
            <div id="card_7" class="card hidden">
                <div class="carousel">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide cover-26"></div>
                            <div class="swiper-slide cover-27"></div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="study_intro">
                    <p style="text-indent: 0; line-height: 1.5;">专题馆</p>
                    <p>以传统与现代相结合的布展手法，陆续展出京昆戏服、苗族服饰、彝族服饰、瑶族服饰等专题展项。</p>

                </div>
            </div>
            <div id="study_control">
                <span id="prev"><</span>
                <span id="next">></span>
            </div>-->

            </div>
            <div class="content_footer"></div>
        </div>
        <div id="main_look" class="main hidden">
            <div id="look_title" class="page_title middle"></div>
            <div id="look_catalog">
                <span id="look_catalog_all" class="look_catalog_item"></span>
                <span id="look_catalog_xu" class="look_catalog_item"></span>
                <span id="look_catalog_li" class="look_catalog_item"></span>
                <span id="look_catalog_ji" class="look_catalog_item"></span>
                <span id="look_catalog_ke" class="look_catalog_item"></span>
                <span id="look_catalog_zhuan" class="look_catalog_item"></span>
            </div>
            <div id="look_content" class="page_content">
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
                <span class="photowall_item"></span>
            </div>
            <div class="content_footer"></div>
        </div>
        <!--听一听-->
        <div id="main_listen" class="main hidden">
            <div id="listen_title" class="page_title middle">
            </div>
            <div id="listen_content" class="page_content">
                <div class="music audio_box">
                    <div class="cover middle"></div>
                    <div class="progress middle">

                        <div class="music-nav">
                            <!--当前时间-->
                            <div class="time" id="time_cur">00:00</div>
                            <!--进度条-->
                            <div class="audio_progress">
                                <span class="audio_line"></span>
                                <span class="audio_blue"></span>
                                <span class="audio_dot"></span>
                                <input min="0" max="0" step="0.4" value="0" id="scale" type="range">
                            </div>
                            <!--歌曲时长-->
                            <div class="time" id="time_long">00:00</div>
                        </div>

                    </div>
                    <div class="control middle">
                        <span class="btn_play btn_pause middle"></span>
                    </div>
                    <audio id="music" src="walking.mp3">
                        Your browser does not support HTML5 audio.
                    </audio>
                </div>
            </div>
        </div>
        <div id="main_try" class="main hidden">
            <div id="try_title" class="page_title middle"></div>
            <div id="try_content" class="page_content">
                <h2>纺织知识小问答：三道选择题</h2>
                <ul id="try_questions">
                    <li>
                        <p>1.抗菌、防臭、抗静电、抗辐射的纤维属于什么纤维？</p>
                        <div class="options">
                            <div class="option"><input type="radio" name="question1" value="A" data_key="key_right" /><span>有机棉</span></div>
                            <div class="option"><input type="radio" name="question1" value="B" data_key="key_error" /><span>功能性纤维</span></div>
                        </div>
                    </li>
                    <li>
                        <p>2.上海首家布鞋专业店是？</p>
                        <div class="options">
                            <div class="option"><input type="radio" name="question2" value="A" data_key="key_error" /><span>小花园鞋店</span></div>
                            <div class="option"><input type="radio" name="question2" value="B" data_key="key_right" /><span>瑞蚨祥布鞋店</span></div>
                        </div>
                    </li>
                    <li>
                        <p>3.北宋由于丝织业发达，出现了以丝织为独立经营的作坊，称为：</p>
                        <div class="options">
                            <div class="option"><input type="radio" name="question3" value="A" data_key="key_error" /><span>布庄</span></div>
                            <div class="option"><input type="radio" name="question3" value="B" data_key="key_right" /><span>机户</span></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div id="main_find" class="main hidden">
            <div id="find_title" class="page_title middle"></div>
            <div id="find_content" class="page_content">
                <div id="find_address">
                    <p class="address_h1">上海纺织博物馆</p>
                    <p>上海市普陀区澳门路150号纺博大厦3层</p>
                </div>
                <div id="find_map">
                    <a href='http://api.map.baidu.com/marker?location=31.253188,121.452343&title=我的位置&content=上海纺织博物馆&output=html&src=webapp.shtraining.openAPIdemo' target='_self' class="middle"></a>
                </div>
            </div>
        </div>

        <div id="main_scan" class="main hidden">
            <div id="scan_title" class="page_title middle"></div>
            <div id="scan_content" class="page_content"></div>
        </div>
        <div id="main_think" class="main hidden">
            <div id="think_title" class="page_title middle"></div>
            <div id="think_cotent" class="page_content">
                <div id="think_question">
                    <p class="address_h1">思考题</p>
                    <p>上海纺织工人在社会主义建设时期有哪些贡献</p>
                </div>
                <div id="think_intro"></div>
            </div>

        </div>
    </section>
    <div id="nav_main">
        <a href="index.html" class="middle middle_nav_item" id="nav_index"></a>
    </div>
    <div id="topnavHome" class="topnav_home hidden"></div>
    <div class="topnav hidden">
        <span>学</span>
        <span>看</span>
        <span>听</span>
        <span>做</span>
        <span>找</span>
        <span>扫</span>
        <span>想</span>
    </div>

    <script src="../asset/swiper/js/swiper.min.js"></script>
    <!--<script src="http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js" type="text/javascript"></script>-->
    <script src="../asset/js/jquery-1.8.3.min.js"></script>
    <script src="../asset/js/audio_player.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            ShowIndex();

        });

        function InitCatalog() {

            $("#catalog_study").click(function () { ShowStudy(); BindTopNavClick();});
            $("#catalog_try").click(function () { ShowTry(); BindTopNavClick(); });
            $("#catalog_look").click(function () { ShowLook(); BindTopNavClick(); });
            $("#catalog_find").click(function () { ShowFind(); BindTopNavClick(); });
            $("#catalog_listen").click(function () { ShowListen(); BindTopNavClick(); });
            $("#catalog_scan").click(function () { ShowScan(); BindTopNavClick(); });
            $("#catalog_think").click(function () { ShowThink(); BindTopNavClick(); });

        }

        function InitStudyCarousel(index) {
            var swiper = new Swiper('#card_' + index + ' .swiper-container', {
                loop: true,

                pagination: {
                    el: '.swiper-pagination'
                }
            });
        }

        function ShowIndex() {

            InitCatalog();

        }

        function ShowStudy() {

            $(".main").addClass("hidden");
            $("#main_study").removeClass("hidden");

            var currentIndex = 1;
            InitStudyCarousel(currentIndex);

            $("#next").click(function () {
                if (currentIndex < 7) {
                    $("#card_" + currentIndex).hide();
                    $("#card_" + (currentIndex + 1)).show().removeClass("animated slideInLeft").addClass("animated slideInRight");
                    currentIndex = currentIndex + 1;
                    InitStudyCarousel(currentIndex);
                }

            });

            $("#prev").click(function () {
                if (currentIndex > 1) {
                    $("#card_" + currentIndex).hide();
                    $("#card_" + (currentIndex - 1)).show().removeClass("animated slideInRight").addClass("animated slideInLeft");
                    currentIndex = currentIndex - 1;
                    InitStudyCarousel(currentIndex);

                }

            });
        }

        function ShowTry() {
            $(".main").addClass("hidden");
            $("#main_try").removeClass("hidden");

            InitBottomNav("a_try");

            $("input[type='radio']").click(function () {
                var result = $(this).attr("data_key");
                $(this).parent().parent().parent().removeClass().addClass(result);
            });
        }

        function ShowLook() {
            $(".main").addClass("hidden");
            $("#main_look").removeClass("hidden");

            var _windowsWidth = $(document).width();
            $(".photowall_item").height(_windowsWidth * 0.19);
        }

        function ShowFind() {
            $(".main").addClass("hidden");
            $("#main_find").removeClass("hidden");

        }

        function ShowListen() {
            $(".main").addClass("hidden");
            $("#main_listen").removeClass("hidden");

        }

        function ShowScan() {
            $(".main").addClass("hidden");
            $("#main_scan").removeClass("hidden");

        }

        function ShowThink() {
            $(".main").addClass("hidden");
            $("#main_think").removeClass("hidden");

        }

        function BindTopNavClick() {
            $("#topnavHome").removeClass("hidden").click(function () {
                $(".topnav").toggleClass("hidden");
                $(".topnav").addClass("animated bounceInDown").toggleClass("flex");
                console.log("click");
            });
        }
    </script>
</body>
</html>